<template>
  <div>
    <router-view v-slot="{Component}">
      <keep-alive>
        <component
          :is="Component"
          v-if="$route.meta && $route.meta?.keepAlive"
        />
      </keep-alive>
      <component
        :is="Component"
        v-if="$route.meta && !$route.meta?.keepAlive"
      />
    </router-view>
    <div>
      <a-space :size="29">
        <a-button
          type="primary"
          @click="toabout"
        >
          toabout
        </a-button>

        <a-button
          type="primary"
          @click="tokeepAliveAbout"
        >
          tokeepAliveAbout
        </a-button>

        <a-button
          type="primary"
          @click="tokeepTrue"
        >
          tokeepTrue
        </a-button>
      </a-space>
    </div>
  </div>
</template>

<script lang='ts'>
import router from '@/router'
import { defineComponent, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { useRouter } from 'vue-router'
export default defineComponent({
  name: 'PageLayoutView',
  setup () {
    const data = reactive({})
    onBeforeMount(() => {
      //    2.组件挂载页面之前执行----onBeforeMount
    })
    onMounted(() => {
      //    3.组件挂载到页面之后执行-------onMounted
    })
    const toabout = () => {
      router.push('/about')
    }
    const tokeepAliveAbout = () => {
      router.push('/keepAliveAbout')
    }
    const test = () => {
      const router = useRouter()
      console.log(router)
    }
    const tokeepTrue = () => {
      router.push('/keepAliveAbout/keepTrue')
    }
    return {
      ...toRefs(data),
      toabout,
      tokeepAliveAbout,
      test,
      tokeepTrue
    }
  }
})
</script>
<style scoped lang='less'>
</style>
